Веб-сервисы разработчикам и дизайнерам №15 — генераторы, цветовые палитры, CSS

Представляем вашему вниманию первую в 2020 году подборку всяких «полезностей» для веб-дизайнеров и разработчиков. Учитывая длительный перерыв с момента прошлой публикации, решили добавить в статью достаточно большое количество разных веб-проектов. Надеемся, они будут вам полезны.

Какого-то одного конкретного направления в статье нет, это будет такая себе «солянка» интересных и актуальных онлайн-сервисов, найденных на просторах сети. Общей фишкой у них всех можно назвать разве что их простоту – как правило, они нацелены на решение какой-то одной задачи.

Glitch Art Generator

Этот генератор позволяет создавать красочные фоны с так называемым глитч эффектом (видео помехи на картинке). Для начала вы выбираете тип градиента — монохромный, цветной, простой или посложнее, затем указываете несколько параметров: количество полосок, их направление, закругленность углов и т.п. При этом также разрешается выбрать цвета для изображения. Как только все сгенерирование можете скачать фон для разных экранов (ПК, смартфон).

Learn CSS Positioning

Интерактивный урок по верстке, который посвящен такому важному нюансу как позиционирование элементов в CSS. Чтобы начать, кликаете “Start Learning”, после попадаете на пошаговый разбор всех важных моментов в данном вопросе. Слева отображается текст с пояснением, справа – результаты на готовом примере.

Really Good Emails

В продолжение недавной статьи про тренды оформления email-рассылок 2020 предлагаем заценить один из самых крупных и красивых архивов дизайнов писем и почтовых уведомлений. На данный момент в базе содержится более 5100 разных email`ов. По каждому объекту есть не просто его описание и скриншот, но и исходный код!

Сервис Really Good Emails обладает действительно прикольной функциональностью: можно просматривать результат отображения в почтовом клиенте или смартфоне, есть описание плюсов/минусов того или иного примера, выборка популярных, похожих элементов, а также поиск нужной инфы по категориям или ключевым словам.

Who can use

В статье про сервисы подбора цвета для сайтов одна из категорий была посвящена доступности вашей цветовой гаммы для людей с ограниченными возможностями ее восприятия. Инструмент Who can use покажет как выбранное вами сочетание оттенков увидят пользователи с определенными отклонениями функции зрения.

CSS Layout

Когда-то мы рассматривали архив паттернов интерфейсов с обзорами разных элементов вебсайтов, с которыми вы сталкиваетесь каждый день. Так вот данный проект не просто их описывает и коллекционирует, а предлагает готовые решения по внедрению на сайт с помощью одного лишь CSS.

Все они поддерживают актуальные нынче технологии Flexbox и CSS Grid. В архиве сейчас находится чуть более 90 объектов, которые разделены на категории: сетка веб-страницы, навигация, поля ввода, отображение контента, фидбек (обратная связь). Выбираете нужный вам вариант, после чего увидите код для реализации задачи.

Happy Hues

Еще один инструмент по цветовым палитрам, который содержит несколько удачных комбинаций для ваших веб-ресурсов. Выбираете слева один из вариантов, и он применится к текущей страничке. В текстовой части будет информация про: используемые оттенки для фона, текста, иллюстраций, кнопок и т.п.; ликбез по терминологии для цветов; а также описание философии восприятия тех или иных цветовых гамм.

Darkmode.Js

Этот скрипт позволяет внедрить на свой проект функцию “темного режима” (dark-mode), то есть когда пользователь может переключить оформление приложения/сайта на ночную более темную версию. Данная фишка сейчас много где используется. Считается, что такая опция помогает подстраивать контент сайта под время суток, облегчая тем самым восприятие информации – очевидно, что в темноте лучше читается светлый текст на темном фоне, а при свете – наоборот.

Shadows by Philipp Brumm

Онлайн CSS генератор для создания красивых теней блоков. С помощью простого и непринужденного интерфейса вы сможете задать определенные параметры для свойства box-shadow – прозрачность, число слоев, отступ, плотность и др. В принципе, прикольная штука.

CreepyFace

Тут будет специальная Javascript библиотека, позволяющая сделать аватарку/картинку с лицом человека, которое будет “следить” за перемещением курсора. Такую опцию можно увидеть на некоторых веб-страницах со списком сотрудников или командой разработчиков. Для создания динамического изображения вам нужно будет использовать камеру и с ее помощью создать несколько фоток, соответствующих тем или иным положениям курсора.

List Of All Emojis

Сервис содержит множество разных эмодзи, которые можно легко скопировать и вставить в твиттер, Facebook, мессенджеры и т.п. Просто кликаете на понравившуюся вам картинку, и она будет скопирована в буфер обмена. Затем вставляете ее через контекстное меню или сочетание клавиш Ctrl+V.

Все эмодзи разбиты на категории – люди и эмоции, животные и природа, еда и напитки, спорт, путешествия и др. В топовых приложения, как правило, есть встроенные функции для их использования, разработчики даже внедрили emoji в WordPress. Тем не менее, иногда возможности добавления картинок просто нет под рукой, например, при написании текста в Word – тогда-то сервис и пригодится.

Итого получилось 10 полезных веб-проектов по нескольким направлениям – от CSS генераторов до обучения и скриптов. Они будут одинаково полезны как веб-разработчикам, так и дизайнерам-верстальщикам. Переходите по ссылкам в скриншотах и лично тестируйте работоспособность данных инструментов.